<template>
<div class="nearby">
  <h3 class="nearby_title">附近店铺</h3>
  <router-link :to="`/shop/${item._id}`" v-for="item in nearbyList"
    :key="item._id">
    <ShopInfo :item="item"></ShopInfo>
  </router-link>
</div>
</template>

<script>
import { get } from '@/utils/request'
import { ref } from 'vue'
import ShopInfo from '@/components/ShopInfo'
const useNearbyListEffect = () => {
  const nearbyList = ref([])
  const getNearbyList = async () => {
    const result = await get('/api/shop/hot-list')
    if (result?.errno === 0 && result?.data?.length) {
      nearbyList.value = result.data
    }
  }
  return { nearbyList, getNearbyList }
}
export default {
  components: { ShopInfo },
  setup () {
    const { nearbyList, getNearbyList } = useNearbyListEffect()
    getNearbyList()
    return { nearbyList }
  }
}
</script>
<style lang='scss' scoped>
@import '@/style/viriables.scss';
.nearby{
  &__title{
    margin: .16rem 0 .04rem 0;
    font-size: .18rem;
    font-weight: normal;
    color: $content-fontcolor;
  }
  a{
    text-decoration: none;
  }
}
</style>
